<style>
.pure_form_extra { background: #fff; padding: 10px; border: 1px solid #aaa; border-radius: 8px; font-size: 12px; width: 250px; }
</style>

<?php
$rslt = $orm->get('pb_ecom_currency', NULL, NULL, NULL, NULL, NULL)->d;
$currs = array();
foreach ($rslt as $itm) {
  if ($itm->is_default == 1) {
    $c1 = $itm;
  }
  $currs[$itm->title] = $itm->rate;
}

$month = Utils::get_param('month', date('Y-m', time()));
$days = cal_days_in_month(CAL_GREGORIAN, date("m", strtotime($month)), date("Y", strtotime($month)));

$opts = new stdClass();
$opts->cd = 'reg_date >= :v1 AND reg_date <= :v2';
$opts->cdv = array(':v1' => date("Y-m-d", strtotime($month)), ':v2' => date("Y-m-", strtotime($month)) . $days);
$opts->sel = 't.reg_date';
$rslt = $orm->get('pb_ecom_customer', NULL, NULL, NULL, NULL, $opts)->d;
$data = array();
$max = 0;
for ($i = strtotime($month), $il = strtotime($month) + (86400 * $days); $i < $il; $i += 86400) {
  $d = date('Y-m-d', $i);
  $amount = 0; 
  foreach ($rslt as $itm) {
    if ($itm->reg_date == $d) {
      $amount++;
    }
  }
  $max = max($max, $amount);
  $data[] = array($d, $amount, $amount);
}
?>

<div class="pure-form pure_form_extra">
  <label>Select a month </label>
  <input type="text" class="monthpicker" data-selected-year="<?php echo date("Y", strtotime($month)); ?>" value="<?php echo $month; ?>" />
</div>
<div id="chart1" style="height:300px; width:750px;"></div>

<script type="text/javascript">
  var __data = JSON.parse('<?php echo addslashes(json_encode($data)); ?>');
  var __id = '<?php echo $app_data->param_id; ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __adm_od_id = '<?php echo ADM_OD_ID; ?>';
  var __adm_prod_id = '<?php echo ADM_PROD_ID; ?>';
  var __adm_cus_id = '<?php echo ADM_CUS_ID; ?>';
  var __max = '<?php echo $max; ?>';
  
  $(function() {
    $('.monthpicker').monthpicker({
      pattern: 'yyyy-mm'
    });
    $('.monthpicker').monthpicker().bind('monthpicker-click-month', function (e, month) {
      Url.redirect(__redmd, __sys + '.php?i=' + __id + '&month=' + e.currentTarget.value);
    });
    
    var plot1 = $.jqplot('chart1', [__data], {
      seriesDefaults: {
        rendererOptions: {
          smooth: true
        },
        showMarker:false,
        pointLabels: { show:true } 
      },
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%#d'},
          tickInterval:'1 day'
        },
        yaxis: {
          min: 0,
          max: __max * 2,
          tickOptions: {
            prefix: '',
            formatString:'%i',
            showLabel: false
          }
        }
      }
    });
    
  });
</script>